<template>
  <div class="line" v-show="showLine" :style="[offset, borderCursor]" @mousedown="handleDown">
    <div class="action" :style="actionStyle">
      <span class="del" @click="handleRemove">&times;</span>
      <span class="value">{{ startValue }}</span>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "ruler-line",
  props: {
    index: Number,
    start: Number,
    vertical: Boolean,
    scale: Number,
    value: Number,
    palette: Object,
    isShowReferLine: Boolean,
    thick: Number,
  },
  emits: ["onMouseDown", "onRelease", "onRemove"],
  setup(props, ctx) {
    const startValue = ref(0);
    const showLine = ref(true);
    const offset = computed(() => {
      const offset = (startValue.value - props.start) * props.scale;
      if (offset < 0) {
        showLine.value = false;
      } else {
        showLine.value = true;
      }
      const positionValue = offset + "px";
      const position = props.vertical
        ? { top: positionValue }
        : { left: positionValue };
      return position;
    });
    const borderCursor = computed(() => {
      const borderValue = `1px solid ${props.palette.lineColor}`;
      const border = props.vertical
        ? { borderTop: borderValue }
        : { borderLeft: borderValue };
      const cursorValue = props.isShowReferLine
        ? props.vertical
          ? "ns-resize"
          : "ew-resize"
        : "none";
      return {
        cursor: cursorValue,
        ...border,
      };
    });
    const actionStyle = computed(() => {
      const actionStyle = props.vertical
        ? { left: props.thick + "px" }
        : { top: props.thick + "px" };
      return actionStyle;
    });
    const handleDown = (e) => {
      const startD = props.vertical ? e.clientY : e.clientX;
      const initValue = startValue.value;
      ctx.emit("onMouseDown");
      const onMove = (e) => {
        const currentD = props.vertical ? e.clientY : e.clientX;
        const newValue = Math.round(
          initValue + (currentD - startD) / props.scale
        );
        startValue.value = newValue;
      };
      const onEnd = (e) => {
        ctx.emit("onRelease", startValue.value, props.index);
        document.removeEventListener("mousemove", onMove);
        document.removeEventListener("mouseup", onEnd);
      };
      document.addEventListener("mousemove", onMove);
      document.addEventListener("mouseup", onEnd);
    };
    const handleRemove = () => {
      ctx.emit("onRemove", props.index);
    };
    const initStartValue = () => {
      startValue.value = props.value;
    };
    onMounted(() => {
      initStartValue();
    });
    return {
      startValue,
      showLine,
      offset,
      borderCursor,
      actionStyle,
      handleRemove,
      handleDown,
      initStartValue,
    };
  },
});
</script>

<style lang="less" scoped>
.line {
  position: absolute;
  .action {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .value {
    pointer-events: none;
    transform: scale(0.83);
  }
  .del {
    cursor: pointer;
    padding: 3px 5px;
    visibility: hidden;
  }
  &:hover .del {
    visibility: visible;
  }
}
.h-container {
  .line {
    height: 100vh;
    top: 0;
    padding-left: 5px;
    .action {
      transform: translateX(-24px);
      .value {
        margin-left: 4px;
      }
    }
  }
}

.v-container {
  .line {
    width: 100vw;
    left: 0;
    padding-top: 5px;
    .action {
      transform: translateY(-24px);
      flex-direction: column;
      .value {
        margin-top: 4px;
      }
    }
  }
}
</style>